<!DOCTYPE html>
<html lang="zh">

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/shop.css" />
    <link rel="stylesheet" type="text/css" href="../styles/shopcart.css" />
    <link rel="stylesheet" type="text/css" href="../styles/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/zepto.min.js"></script>
</head>

<body>
<div class="wrap">
    <!-- 头部 start -->
    <header class="header_bar">
        <a href="../index.html">
            <div class="header_bar_back"></div>
        </a>
        <div class="header_bar_title">我的购物车</div>
    </header>
    <!-- 头部 end -->
    <div class="container">
        <!-- tab end -->
        <div class="bd">
            <!--全部订单-->
            <ul>
                <li>
                    <div class="order-no"><a href="shop.html">永辉超市-搜秀城店</a>
                    </div>
                    <div class="order-detail">
                        <div class="menu_list" id="app">
                            <dl>
                                <dd class="good_item" v-for="item in cartItems" :key="item.id">
                                    <img :src="item.image" alt="">
                                    <section class="info">
                                        <p class="name">{{ item.name }}</p>
                                        <p class="desc">优质商品</p>
                                        <p class="sale">
                                            <span>月售100+</span>
                                            <span>好评率96%</span>
                                        </p>
                                        <div class="more">
                                            <div class="price">
                                                <span>￥</span> {{ item.price }}
                                            </div>
                                            <div class="action">
                                                <span class="iconfont icon-jian" @click="decreaseCount(item.id)"></span>
                                                <span class="num">{{ item.count }}</span>
                                                <span class="iconfont icon-jia" @click="increaseCount(item.id)"></span>
                                            </div>
                                        </div>
                                    </section>
                                </dd>
                            </dl>
                        </div>

                        <script>
                            // 创建Vue实例
                            var app = new Vue({
                                el: '#app',
                                data: {
                                    cartItems: []
                                },
                                methods: {
                                    // 增加商品数量
                                    increaseCount: function(id) {
                                        var item = this.cartItems.find(item => item.id === id);
                                        if (item) {
                                            item.count++;
                                            this.updateCart();
                                        }
                                    },
                                    // 减少商品数量
                                    decreaseCount: function(id) {
                                        var item = this.cartItems.find(item => item.id === id);
                                        if (item && item.count > 1) {
                                            item.count--;
                                            this.updateCart();
                                        } else if (item && item.count === 1) {
                                            // 如果数量为1，减少后会变为0，从购物车移除
                                            this.cartItems = this.cartItems.filter(item => item.id !== id);
                                            this.updateCart();
                                        }
                                    },
                                    // 更新购物车数据
                                    updateCart: function() {
                                        // 存储到localStorage
                                        localStorage.setItem('cart', JSON.stringify(this.cartItems));
                                        // 更新购物车总数
                                        var totalCount = this.cartItems.reduce((sum, item) => sum + item.count, 0);
                                        localStorage.setItem('cartCount', totalCount);
                                    }
                                },
                                mounted: function() {
                                    // 从localStorage加载购物车数据
                                    const savedCartItems = localStorage.getItem('cart');
                                    if (savedCartItems) {
                                        this.cartItems = JSON.parse(savedCartItems);
                                    }
                                }
                            })
                        </script>
                    </div>
                    <div class="">
                        <button class="account" onclick="location.href='order-confirm.html'">去结算</button>
                    </div>
                </li>
            </ul>

        </div>

    </div>
</div>
</body>

<!-- 数量加减脚本已被Vue接管 -->

</html>